<template>
  <div class="page flex-col">
    <!-- 导航开始 -->
    <Navv :key="new Date().getTime()"></Navv>
    <!-- 导航结束 -->

    <div class="lba">
      <img style="height: 640px;width: 100%;" referrerpolicy="no-referrer" src="../../assets/images/666.jpg" />
      <img class="kssy-img" referrerpolicy="no-referrer" src="../../assets/images/b2.png">
    </div>

    <div class="dbg column_c">
      <div class="xbj">
        <div class="center">
          <div class="kfzsz center">更新日志</div>
        </div>

        <div class="xiana"></div>

        <el-row :gutter="20" style="padding: 50px;">
          <el-col :span="4">
            <div class="lef">
              <div v-for="(item, index) in List" :key="index" :class="{ timez: item.active }" class="timek cursor row_a_c" @click="toggleStyle(item,index)">
                <div style="width: 20px;">
                  <div v-if="item.active" class="xdd"></div>
                </div>
                <div>{{item.dateTime}}</div>
              </div>
            </div>
          </el-col>

          <el-col :span="1">
            <div class="xianb"></div>
          </el-col>

          <el-col :span="19">
            <div class="scroll-container">

              <div v-for="(itemb, indexb) in List" :key="indexb+ new Date().getTime()" class="rigt" :class="{ rigtt: itemb.active }">
                <div :ref="getRef(indexb)">

                  <div class="row_a_c">

                    <div style="width: 180px;white-space: nowrap;margin-bottom: 10px;font-size: 30px;">
                      {{itemb.dateTime}}
                    </div>

                    <div v-if="itemb.active" :style="{color:itemb.subhead_color}" style="min-width: 200px;white-space: nowrap;margin-bottom: 20px;font-size: 28px;">
                      {{itemb.title}}
                    </div>


                    <div v-else style="min-width: 200px;white-space: nowrap;margin-bottom: 10px;font-size: 28px;">
                      {{itemb.title}}
                    </div>

                  </div>

                  <div style="margin-top: -15px;" v-html="itemb.content"></div>
                </div>
              </div>

            </div>
          </el-col>

        </el-row>




      </div>
    </div>

    <!-- 底+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    <div class="block_5 flex-col">
      <div class="text-wrapper_38  center cursor" @click="batz">
        <span class="">2023-比奇互娱&nbsp;&nbsp;|&nbsp;&nbsp;渝ICP备202210445号-2&nbsp;&nbsp;|&nbsp;&nbsp;重庆比奇互娱网络科技有限公司</span>
      </div>
    </div>
    <!-- 底========================================================================================= -->

    <!-- 模态框 -->
    <el-dialog @open="openDialog()" style="margin-top: 260px;" :visible.sync="dialogShow" width="500px" @close="closeDialog()">

      <span slot="title" class="dialog-footer" v-if="loginShow">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 账号登录++++++++++++ -->
          <el-tab-pane label="账号登录" name="first">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
              <el-form-item prop="username">
                <el-input class="mt_10" placeholder="请输入账号" v-model="loginForm.username" clearable></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input show-password class="" placeholder="请输入密码" v-model="loginForm.password" clearable></el-input>
              </el-form-item>
            </el-form>

            <div class="mt_20 row space-between">
              <div class="row ">
                <el-checkbox v-model="loginForm.agree"></el-checkbox>
                <!-- <el-checkbox v-model="agree"></el-checkbox> -->
                <div class="ml_5 f_14">我已阅读并同意<span @click="yhxxf" class="cursor" style="color: #3B88FE;">(开发者账号注册协议)</span></div>
              </div>
              <div class="f_14 color_9D9D9D cursor" @click="wjmm()">忘记密码</div>
            </div>
            <el-button @click.native.prevent="handleLogin('username')" size="medium" style="width: 100%;height: 38px;" class="mt_30" type="primary">登录</el-button>

            <div class="space-between mt_20">
              <!-- <div class="f_15 cursor" @click="wxdl">微信授权登录</div> -->
              <div class="f_15 cursor"></div>
              <div class="f-15 color_1A82FB cursor" @click="ljzc">立即注册</div>
            </div>
          </el-tab-pane>
          <!-- 账号登录=========== -->

          <!-- 手机登录+++++++++++++ -->
          <el-tab-pane label="手机登录" name="second">
            <el-input class="mt_10" placeholder="请输入手机号" v-model="loginForm.mobile" clearable></el-input>
            <div class="row_a_c mt20 ">
              <el-input class=" " placeholder="请输入验证码" v-model="loginForm.code" clearable></el-input>
              <div v-if="!isCountdown" class="lzm center f_15 color_fff  cursor" @click.stop="sendSms(1)">获取验证码</div>
              <div v-else class="lzmhs center f_15   cursor"> {{ countdown }}秒后重新获取</div>
            </div>

            <div class="mt_20 row space-between">
              <div class="row ">
                <el-checkbox v-model="loginForm.agree"></el-checkbox>
                <div class="ml_5 f_14">我已阅读并同意<span @click="yhxxf" class="cursor" style="color: #3B88FE;">(开发者账号注册协议)</span></div>
              </div>
              <div class="f_14 color_9D9D9D cursor" @click="wjmm()">忘记密码</div>
            </div>
            <el-button size="medium" style="width: 100%;height: 38px;" class="mt_30" type="primary" @click="handleLogin('mobile')">登录</el-button>

            <div class="space-between mt_20">
              <!-- <div class="f_15 cursor" @click="wxdl">微信授权登录</div> -->
              <div class="f_15 cursor"></div>
              <div class="f-15 color_1A82FB cursor" @click="ljzc">立即注册</div>
            </div>
          </el-tab-pane>
          <!-- 手机登录====================== -->

        </el-tabs>
      </span>


      <!-- 找回密码 -->
      <span slot="title" class="dialog-footer" v-if="wjmmShow">
        <el-form ref="retrieveForm" :model="retrieveForm" :rules="retrieveRules">
          <el-tabs v-model="wjmmName" @tab-click="handleClick">
            <el-tab-pane label="找回密码" name="wjmmfirst">

              <el-form-item prop="mobile">
                <el-input class="mt_10" placeholder="请输入手机号" v-model="retrieveForm.mobile" clearable></el-input>
              </el-form-item>

              <el-form-item prop="code">
                <div class="row ">
                  <el-input class="row_a_c" placeholder="请输入验证码" v-model="retrieveForm.code" clearable></el-input>
                  <div v-if="!isCountdown" class="lzm center f_15 color_fff  cursor" @click.stop="sendSms(3)">
                    获取验证码</div>
                  <div v-else class="lzmhs center f_15   cursor"> {{ countdown }}秒后重新获取</div>
                </div>
              </el-form-item>

              <el-form-item prop="password">
                <el-input show-password class="" placeholder="请输入新密码" v-model="retrieveForm.password" clearable></el-input>
                <div class="color_9D9D9D f_15 mt5">
                  8-16位,可由任意大小写字母、特殊字符和数字组成
                </div>
              </el-form-item>


              <el-form-item prop="affirm_password">
                <el-input show-password class="" placeholder="确认新密码" v-model="retrieveForm.affirm_password" clearable></el-input>
              </el-form-item>

              <div class="space-between ">
                <el-button @click="quxiao()" size="medium" style="width: 45%;height: 38px;margin-left: 20px;" class="mt_30 mr_10" type="info">取消</el-button>
                <el-button size="medium" style="width: 45%;height: 38px;margin-right: 20px;" class="mt_30" type="primary" @click="retpas">确定</el-button>
              </div>

            </el-tab-pane>

          </el-tabs>
        </el-form>
      </span>
      <!-- 找回密码================================= -->

      <!-- 注册账号+++++++++++++++++ -->
      <span slot="title" class="dialog-footer" v-if="ljzcShow">
        <el-form ref="regForm" :model="regForm" :rules="regRules">
          <el-tabs v-model="ljzcName" @tab-click="handleClick">
            <el-tab-pane label="注册账号" name="ljzcfirst">


              <el-form-item prop="mobile">
                <el-input class="mt_10" placeholder="请输入手机号" v-model="regForm.mobile" clearable></el-input>
              </el-form-item>

              <el-form-item prop="code">
                <div class="row_a_c">
                  <el-input placeholder="请输入验证码" v-model="regForm.code" clearable></el-input>
                  <div v-if="!isCountdown" class="lzm center f_15 color_fff  cursor" @click.stop="sendSms(2)">获取验证码
                  </div>
                  <div v-else class="lzmhs center f_15   cursor"> {{ countdown }}秒后重新获取</div>
                </div>
              </el-form-item>



              <el-form-item prop="password">
                <el-input show-password class="" placeholder="请输入密码" v-model="regForm.password" clearable></el-input>
                <div class="color_9D9D9D f_15 ">
                  8-16位,可由任意大小写字母、特殊字符和数字组成
                </div>
              </el-form-item>



              <el-form-item prop="affirm_password">
                <el-input show-password class="" placeholder="请再次确认账号密码" v-model="regForm.affirm_password" clearable></el-input>
              </el-form-item>

              <div class=" row space-between">
                <div class="row ">
                  <el-checkbox v-model="regForm.agree"></el-checkbox>
                  <div class="ml_5 f_14">我已阅读并同意<span @click="yhxxf" class="cursor" style="color: #3B88FE; ">(开发者账号注册协议)</span></div>
                </div>
              </div>

              <el-button @click="register" size="medium" style="width: 100%;height: 38px;" class="mt_30" type="primary">注册</el-button>
            </el-tab-pane>

          </el-tabs>
        </el-form>
      </span>
      <!-- 注册账号======================= -->
    </el-dialog>

    <el-dialog title="开发者协议" :visible.sync="yhxx" width="100%" center>
      <span v-html="kfzxx"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="yhxx = false">取 消</el-button>
        <el-button type="primary" @click="yhxx = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>






<script>
  import * as Login from "@/api/login";
  import Cookies from "js-cookie";
  import * as Advert from "@/api/operation/advert";
  import * as Notice from "@/api/system/notice";
  import * as News from "@/api/system/news";
  import {
    encrypt,
    decrypt
  } from '@/utils/jsencrypt'
  import {
    getToken,
    setToken,
    removeToken
  } from '@/utils/auth'
  import Navv from "@/components/Navv";
  import * as UpdateLog from '@/api/system/update_log';
  export default {
    name: "Login",
    components: {
      Navv
    },
    data() {
      return {
        container: null,
        itembRefs: [], // 用于存储右侧内容元素的引用
        List: [],
        coent: '',
        loading: false,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
        },

        countdown: 60,
        isCountdown: false,

        login_reg: 1, //1登录 2注册
        kfzxx: '',
        yhxx: false,
        // 查询参数
        queryParamsA: {
          page: 1,
          pageSize: 10,
          advert_place_id: 14
        },
        queryParamsB: {
          page: 1,
          pageSize: 10,
          advert_place_id: 15
        },

        //通知公告
        queryParamsC: {
          page: 1,
          pageSize: 2,

        },

        AdvertListA: [], //广告列表A
        AdvertListB: [], //广告列表B
        NoticeList: [], //通知公告
        activeName: 'first',
        wjmmName: 'wjmmfirst',
        ljzcName: 'ljzcfirst',
        dialogShow: false,
        loginShow: true,
        wjmmShow: false, //忘记密码
        ljzcShow: false, //立即注册
        xyShow: false, //学院
        wdShow: false, //文档





        codeUrl: "",
        agree: true,
        loginForm: {
          agree: true,
          username: "",
          password: "",
          mobile: '',
          code: '',
          par: '', //1账户 2手机
        },
        loginRules: {
          username: [{
            required: true,
            trigger: "blur",
            message: "请输入您的账号"
          }],
          password: [{
            required: true,
            trigger: "blur",
            message: "请输入您的密码"
          }]
        },

        regForm: {
          agree: true,
          mobile: '',
          code: '',
          password: '',
          affirm_password: '',
        },


        //注册++++++++++++++++
        regRules: {
          mobile: [{
            required: true,
            trigger: "blur",
            message: "请输入手机号"
          }],
          code: [{
            required: true,
            trigger: "blur",
            message: "请输入验证码"
          }],
          password: [{
              required: true,
              trigger: "blur",
              message: "请输入您的密码"
            },
            {
              min: 8,
              max: 16,
              message: '长度在 8 到 16 个字符',
              trigger: 'blur'
            }
          ],
          affirm_password: [{
            required: true,
            trigger: "blur",
            message: "请输入您的确认密码"
          }]
        },

        //注册===========

        //找回密码++++++++++++++++
        retrieveForm: {
          mobile: '',
          code: '',
          password: '',
          affirm_password: '',
        },

        retrieveRules: {
          mobile: [{
            required: true,
            trigger: "blur",
            message: "请输入手机号"
          }],
          code: [{
            required: true,
            trigger: "blur",
            message: "请输入验证码"
          }],
          password: [{
              required: true,
              trigger: "blur",
              message: "请输入您的密码"
            },
            {
              min: 8,
              max: 16,
              message: '长度在 8 到 16 个字符',
              trigger: 'blur'
            }
          ],
          affirm_password: [{
            required: true,
            trigger: "blur",
            message: "请输入您的确认密码"
          }]
        },
        //找回密码===============
        loading: false,

      };
    },

    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      this.getList();
      this.getAdvertListA();
      this.getAdvertListB();
      this.getNoticeList(); //通知，公告
      this.getCookie();
      this.getUserAgreement(); //获取用户协议

    },
    mounted() {
      this.$set(this.loginForm, 'agree', true);
      this.$set(this.regForm, 'agree', true);
    },
    methods: {
      getRef(index) {
        return 'container' + index; // 根据索引生成唯一的引用名称
      },

      batz() {
        window.open("https://beian.miit.gov.cn", "_blank");
      },


      toggleStyle(item, index) {
        if (this.itembRefs[index]) {
          this.itembRefs[index].scrollIntoView({
            behavior: "smooth",
            // behavior: 'instant',
            block: 'center'
          });
        }
        this.List.forEach(i => {
          i.active = false; // 将所有元素的 active 属性设为 false
        });
        item.active = true; // 将点击的元素的 active 属性设为 true
        this.coent = item.content;

        const refName = 'container' + index;
        this.container = this.$refs[refName][0];
        this.container.scrollIntoView({
          behavior: "smooth",
          // behavior: 'instant',
          block: 'center'
        });


      },

      getList() {
        this.loading = true;
        UpdateLog.getList(this.queryParams).then(response => {
          if (response.data.rows) {
            this.coent = response.data.rows[0].content;
            this.List = response.data.rows.map((item, index) => {
              return {
                ...item,
                active: index === 0 ? true : false // 设置第一个元素的 active 属性为 true，其他元素的 active 属性为 false
              };
            });
          }
          this.loading = false;
        });
      },

      //到计时
      startCountdown() {
        if (!this.isCountdown) {
          this.isCountdown = true;
          let timer = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown--;
            } else {
              clearInterval(timer);
              this.isCountdown = false;
              this.countdown = 60; // 重置倒计时
            }
          }, 1000);
        }
      },

      /**获取用户协议 */
      getUserAgreement() {
        News.getUserAgreement().then(response => {
          this.kfzxx = response.data.content
        });
      },

      yhxxf() {
        this.yhxx = true
      },
      getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");

        this.loginForm = {
          username: username === undefined ? this.loginForm.username : username,
          password: password === undefined ? this.loginForm.password : decrypt(password),

        };
      },
      /** 查询广告列表A */
      getAdvertListA() {
        this.loading = true;
        Advert.List(this.addDateRange(this.queryParamsA)).then(response => {
          this.AdvertListA = response.data.rows;
          this.loading = false;
        });
      },
      /** 查询广告列表B*/
      getAdvertListB() {
        this.loading = true;
        Advert.List(this.addDateRange(this.queryParamsB)).then(response => {
          this.AdvertListB = response.data.rows;
          this.loading = false;
        });
      },


      /**通知，公告 */
      getNoticeList() {
        this.loading = true;
        Notice.List(this.addDateRange(this.queryParamsC)).then(response => {
          this.NoticeList = response.data.rows;
          this.loading = false;
        });
      },

      fatherMethod(type) {
        this.login_reg = type
        //type 1登录 2注册
        console.log('测试', type);
        this.dialogShow = !this.dialogShow
      },


      //发送短信
      sendSms(type) {
        this.startCountdown();
        //type 1 手机登录 2 注册 3找回密码
        this.loading = true;
        if (type == 1) {
          var mobile = this.loginForm.mobile
          var scene = 'login'
        }
        if (type == 2) {
          var mobile = this.regForm.mobile
          var scene = 'register'
        }

        if (type == 3) {
          var mobile = this.retrieveForm.mobile
          var scene = 'retrieve_password'
        }



        Login.sendSms({
          mobile: mobile,
          scene: scene
        }).then(response => {
          this.retrieveForm.code = response.data
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.loading = false;
        });
      },

      handleLogin(type) {
        if (type == "username") {
          this.$refs.loginForm.validate(valid => {
            if (valid) {
              if (!this.loginForm.agree) {
                this.$message({
                  message: '请阅读开发者账号注册协议',
                  type: 'warning'
                });
              } else {
                this.loading = true;
                this.loginForm.agree = true;
                Cookies.set("username", this.loginForm.username, {
                  expires: 30
                });
                Cookies.set("password", encrypt(this.loginForm.password), {
                  expires: 30
                });
                // Cookies.remove("username");
                // Cookies.remove("password");

                this.loginForm.par = 1;
                this.$store.dispatch("Login", this.loginForm).then(() => {
                  this.$router.push({
                    path: this.redirect || "/center/dataAnalysis"
                  }).catch(() => {});
                }).catch(() => {
                  this.loading = false;
                  // if (this.captchaOnOff) {
                  //   this.getCode();
                  // }
                });
              }
            }
          });
        } else {
          if (!this.loginForm.agree || !this.loginForm.mobile || !this.loginForm.code) {
            this.$message({
              message: '参数错误',
              type: 'warning'
            });
          } else {
            this.loginForm.par = 2;
            this.$store.dispatch("Login", this.loginForm).then(() => {
              this.$router.push({
                path: this.redirect || "/center/dataAnalysis"
              }).catch(() => {});
            }).catch(() => {
              this.loading = false;
              // if (this.captchaOnOff) {
              //   this.getCode();
              // }
            });

          }
        }

      },

      //手机登录
      mobileLogin() {
        console.log('aaa', this.loginForm.mobile)
        if (!this.loginForm.agree || !this.loginForm.mobile || !this.loginForm.code) {
          this.$message({
            message: '参数错误',
            type: 'warning'
          });
        } else {
          this.loading = true;
          Login.mobileLogin({
            agree: this.loginForm.agree,
            mobile: this.loginForm.mobile,
            code: this.loginForm.code,
          }).then(response => {

            this.$message({
              message: response.message,
              type: 'success'
            });

            this.dialogShow = false;
            this.loading = false;
          }).catch(error => {
            this.$message.error(error.response.data.message);
          });
        }
      },



      //注册
      register() {
        this.$refs.regForm.validate((valid) => {
          if (valid) {
            if (!this.regForm.agree) {
              this.$message({
                message: '请阅读开发者账号注册协议',
                type: 'warning'
              });
            } else {
              this.loading = true;
              Login.register({
                agree: this.regForm.agree,
                mobile: this.regForm.mobile,
                password: this.regForm.password,
                affirm_password: this.regForm.affirm_password,
                code: this.regForm.code,
              }).then(response => {
                this.$message({
                  message: response.message,
                  type: 'success'
                });
                this.dialogShow = false;
                this.loading = false;
              }).catch(error => {
                this.$message.error(error.response.data.message);
              });
            }



          }
        });

      },

      //找回密码
      retpas() {
        this.$refs.retrieveForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            Login.retpas({
              mobile: this.retrieveForm.mobile,
              password: this.retrieveForm.password,
              affirm_password: this.retrieveForm.affirm_password,
              code: this.retrieveForm.code,
            }).then(response => {
              this.$message({
                message: response.message,
                type: 'success'
              });
              this.dialogShow = false;
              this.loading = false;
            }).catch(error => {
              this.$message.error(error.response.data.message);
            });

          }
        });

      },




      toUrl(url) {
        var token = getToken();
        if (!token) {
          this.fatherMethod(1)
          // this.$message({
          //   message: '请先登录',
          //   type: 'warning'
          // });
        } else {
          this.$router.push({
            path: url
          })
        }


      },
      quxiao() {
        this.dialogShow = false;
      },
      //点击密码
      wjmm() {
        this.wjmmShow = true;
        this.loginShow = false;
        this.ljzcShow = false;
      },
      //打开模态框
      openDialog() {
        //1登录 2注册
        if (this.login_reg == 1) {
          this.dialogShow = true;
          this.loginShow = true;;
          this.wjmmShow = false;
          this.ljzcShow = false;
        } else {
          this.dialogShow = true;
          this.loginShow = false;;
          this.wjmmShow = false;
          this.ljzcShow = true;
        }

      },
      //关闭模态框
      closeDialog() {
        // this.dialogShow = false;
        // this.wjmmShow = false;
        // this.ljzcShow = false;
        // this.loginShow = false;
      },


      // 微信登陆
      wxdl() {
        var redirectURI = 'http://www.zdindin.com/'; ///扫码后回调地址
        var appId = 'wx515d8d1893f1e1f5'; //公众号平台提供的appIdlet
        window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appId + '&redirect_uri=' +
          redirectURI + '&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect'
      },




      ljzc() {
        this.ljzcShow = true;
        this.wjmmShow = false;
        this.loginShow = false;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },


    }
  };
</script>

<style>
  p {
    margin-bottom: -15px !important;
  }
</style>
<style scoped>
  .page {
    /* overflow: hidden; */
  }


  .kssy-img {
    z-index: 1000;
    position: absolute;
    left: 360px;
    top: 180px;
    width: 520px;
    height: 125px;


  }

  .lba {
    position: relative;
  }

  .kssy {
    z-index: 1000;
    position: absolute;
    left: 360px;
    top: 360px;
    width: 178px;
    height: 58px;
    background: #1A82FB;
    font-size: 23px;

    font-weight: bold;
    color: #FFFFFF;
    line-height: 46px;
  }

  .lzm {
    width: 110px;
    height: 36px;
    background: #1A82FB;
    border-radius: 0px 5px 5px 0px;
  }

  .lzmhs {
    color: #515151;
    width: 150px;
    height: 38px;
    background: #F3F3F4;
    border-radius: 0px 5px 5px 0px;
  }

  .dbg {
    margin-top: -10px;
    /* background: #0F141D; */
    background-image: url("../../assets/images/bb22.png");
    width: 100%;
    /* height: 100vh; */
    height: 1250px;

  }

  .xbj {
    /* background: #181C27; */
    width: 80%;
    padding: 30px;
    height: 100vh;
  }

  .kfzsz {
    width: 360px;
    height: 56px;
    background: #1A82FB;
    margin-top: 40px;
    margin-bottom: 40px;


    font-size: 26px;

    font-weight: bold;
    color: #FFFFFF;
  }

  .xiana {
    width: 100%;
    height: 1px;
    background: #000;
    opacity: 0.4;
  }


  .xianb {
    width: 1px;
    height: 1000px;
    background: #000;
    opacity: 0.4;
  }

  .timez {
    color: #1A82FB !important;
  }

  .timezf {
    color: #5ea2f1 !important;
  }

  .timek {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #000000;
    margin-bottom: 20px;
  }

  .rigt {
    color: #000000;
    margin-bottom: 50px;
    padding: 50px;
  }

  .rigtt {
    padding: 50px;
    border: 1px solid #1A82FB !important;
    border-radius: 6px;
  }

  .xdd {
    margin-right: 10px;
    width: 10px;
    height: 10px;
    background: #1A82FB;
    border-radius: 50%;
  }

  .scroll-container {
    height: 900px;
    /* 设置容器的固定高度 */
    overflow-y: auto;
    /* 添加垂直滚动条 */
  }



  .block_5 {
    background-color: #efeff0;
    height: 80px;
    margin: 0;
  }

  .group_32 {
    width: 1032px;
    height: 67px;
    margin: 39px 0 0 0;
  }

  .image_14 {
    width: 234px;
    height: 58px;
  }

  .text-wrapper_33 {
    width: 70px;
    height: 52px;
    margin: 15px 0 0 97px;
  }

  .text_59 {
    width: 64px;
    height: 16px;
    overflow-wrap: break-word;
    color: #010101;
    font-size: 16px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }

  .text_60 {
    width: 69px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 22px 0 0 1px;
  }

  .text-wrapper_34 {
    width: 79px;
    height: 52px;
    margin: 15px 0 0 241px;
  }

  .text_61 {
    width: 79px;
    height: 16px;
    overflow-wrap: break-word;
    color: #010101;
    font-size: 16px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }

  .text_62 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-top: 22px;
  }

  .text-wrapper_35 {
    width: 64px;
    height: 51px;
    margin: 15px 0 0 247px;
  }

  .text_63 {
    width: 64px;
    height: 16px;
    overflow-wrap: break-word;
    color: #010101;
    font-size: 16px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }

  .text_64 {
    width: 55px;
    height: 13px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-top: 22px;
  }

  .text-wrapper_36 {
    width: 692px;
    height: 13px;
    margin: 19px 0 0 766px;
  }

  .text_65 {
    width: 69px;
    height: 13px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .text_66 {
    width: 55px;
    height: 13px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-left: 241px;
  }

  .text_67 {
    width: 55px;
    height: 13px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-left: 272px;
  }

  .text-wrapper_37 {
    width: 366px;
    height: 14px;
    margin: 19px 0 0 766px;
  }

  .text_68 {
    width: 69px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .text_69 {
    width: 56px;
    height: 14px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }

  .block_7 {
    background-color: #dbdbdb;
    width: 1467px;
    height: 1px;
    margin: 83px 0 0 0;
  }

  .text-wrapper_38 {
    width: 100%;
    height: 17px;
    padding-left: 200px;
    padding-right: 200px;
    margin-top: 30px;
  }

  .text_70 {
    width: 443px;
    height: 17px;
    overflow-wrap: break-word;
    color: #555555;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }
</style>
